import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { uniqueId } from 'lodash';
import { OptionItem } from '@iux/live';

interface DemoUser {
  id: string;
  name: string;
  age: number;
  expand: boolean;
  random: number;
  disabled: boolean;
  children?: DemoUser[];
}

@Component({
  selector: 'app-demo10',
  templateUrl: './demo10.component.html',
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Demo10Component implements OnInit {

  data: OptionItem[];
  value: OptionItem;
  index = 100;
  constructor() { }

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = this.getData();
  }

  getData(len: number = 100, index: number = 0) {
    return Array.from({length: len}).map((item, key) => {
      return this.initUser(key + index);
    });
  }

  initUser(key: number) {
    return {
      id: uniqueId('uid'),
      label: `user${key}`,
      age: 10 + key,
      expand: false,
      random: parseInt(Math.random() * 100 + '', 10),
      isLeaf: true
    };
  }

  scroll() {
    console.log('scroll end, append new 10 items.');
    const offsetIndex = 10;
    this.data = [...this.data, ...this.getData(offsetIndex, this.index)];
    this.index += offsetIndex;
  }
}
